/* Google Fonts에서 Pretendard 로드 (Toss Product Sans와 유사한 한국형 폰트) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@layer reset, base, tokens, recipes, utilities;

/*
  Global reset only — keep the global surface minimal.
  - No theme variables
  - No dark mode
  - No global brand colors or typography scales
  Each page/component should style itself using Tailwind utilities.
*/

@layer base {
  /* 1) Modern element reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html,
  body,
  #root {
    height: 100%;
  }
  body {
    margin: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family:
      "Pretendard",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      "Malgun Gothic",
      "맑은 고딕",
      sans-serif;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  ul,
  ol {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
}

@layer utilities {
  /* 2) Accessibility helpers */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* 3) Modal body scroll prevention */
  body.modal-open {
    overflow: hidden;
  }
}
@layer base {
  :root {
    /* VitePress 스타일 색상 변수 */
    --vp-c-white: #ffffff;
    --vp-c-black: #000000;
    --vp-c-gray-1: #dddde3;
    --vp-c-gray-2: #e4e4e9;
    --vp-c-gray-3: #ebebef;
    --vp-c-gray-soft: rgba(142, 150, 170, 0.14);
    --vp-c-indigo-1: #3451b2;
    --vp-c-indigo-2: #3a5ccc;
    --vp-c-indigo-3: #5672cd;
    --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
    --vp-c-text-1: rgba(60, 60, 67);
    --vp-c-text-2: rgba(60, 60, 67, 0.78);
    --vp-c-text-3: rgba(60, 60, 67, 0.56);
    --vp-c-bg: #ffffff;
    --vp-c-bg-alt: #f6f6f7;
    --vp-c-bg-elv: #ffffff;
    --vp-c-bg-soft: #f6f6f7;
    --vp-c-border: #c2c2c4;
    --vp-c-divider: #e2e2e3;
    --vp-c-gutter: #e2e2e3;
    --vp-c-brand: #646cff;
    --vp-c-brand-light: #747bff;
    --vp-c-brand-lighter: #9499ff;
    --vp-c-brand-lightest: #bcc0ff;
    --vp-c-brand-dark: #535bf2;
    --vp-c-brand-darker: #454ce1;
    --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);

    /* 타이포그래피 */
    --vp-font-family-base:
      "Toss Product Sans", ui-sans-serif, system-ui, sans-serif;
    --vp-font-family-mono:
      ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono",
      Menlo, monospace;

    /* 레이아웃 */
    --vp-layout-max-width: 1440px;
    --vp-sidebar-width: 272px;
    --vp-screen-max-900: 900px;
    --vp-screen-max-768: 768px;
    --vp-screen-max-640: 640px;

    /* z-index */
    --vp-z-index-footer: 10;
    --vp-z-index-local-nav: 20;
    --vp-z-index-nav: 30;
    --vp-z-index-layout-top: 40;
    --vp-z-index-backdrop: 50;
    --vp-z-index-sidebar: 60;
  }
}
